<!--&lt;!&ndash;<script setup>&ndash;&gt;-->
<!--&lt;!&ndash;import { getDetailAPI } from '@/apis/detail'&ndash;&gt;-->
<!--&lt;!&ndash;import { ref } from 'vue'&ndash;&gt;-->
<!--&lt;!&ndash;import { useRoute } from 'vue-router'&ndash;&gt;-->
<!--&lt;!&ndash;import GoodsSku from '@/components/GoodsSku.vue'&ndash;&gt;-->
<!--&lt;!&ndash;import { useCartStore } from '@/stores/index'&ndash;&gt;-->
<!--&lt;!&ndash;import { ElMessage } from 'element-plus'&ndash;&gt;-->
<!--&lt;!&ndash;import { getPathMap, initDisabledStatus } from '@/components/GoodsSku.vue'&ndash;&gt;-->
<!--&lt;!&ndash;// 获取商品详情&ndash;&gt;-->
<!--&lt;!&ndash;const good = ref({&ndash;&gt;-->
<!--&lt;!&ndash;  specs: [],     // 初始化 specs 为空数组&ndash;&gt;-->
<!--&lt;!&ndash;  details: {},   // 初始化 details 为空对象&ndash;&gt;-->
<!--&lt;!&ndash;  categories: [], // 初始化 categories 为空数组&ndash;&gt;-->
<!--&lt;!&ndash;  brand: {}      // 初始化 brand 为空对象&ndash;&gt;-->
<!--&lt;!&ndash;});&ndash;&gt;-->
<!--&lt;!&ndash;const route = useRoute()&ndash;&gt;-->
<!--&lt;!&ndash;// const getGoods = async () => {&ndash;&gt;-->
<!--&lt;!&ndash;//   try {&ndash;&gt;-->
<!--&lt;!&ndash;//     const res = await getDetailAPI(route.params.id)&ndash;&gt;-->
<!--&lt;!&ndash;//     good.value = res.data&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 转换规格数据（空值保护）&ndash;&gt;-->
<!--&lt;!&ndash;//     if (good.value.specs && Array.isArray(good.value.specs)) {&ndash;&gt;-->
<!--&lt;!&ndash;//       good.value.specs = good.value.specs.map(spec => ({&ndash;&gt;-->
<!--&lt;!&ndash;//         name: spec.name,&ndash;&gt;-->
<!--&lt;!&ndash;//         values: spec.values.map(value => ({&ndash;&gt;-->
<!--&lt;!&ndash;//           name: value,      // 使用 name 字段（对齐子组件）&ndash;&gt;-->
<!--&lt;!&ndash;//           disabled: false&ndash;&gt;-->
<!--&lt;!&ndash;//         }))&ndash;&gt;-->
<!--&lt;!&ndash;//       }))&ndash;&gt;-->
<!--&lt;!&ndash;//     }&ndash;&gt;-->
<!--&lt;!&ndash;//     // 当SKU唯一时自动选中（无论是否有规格）&ndash;&gt;-->
<!--&lt;!&ndash;//     if (good.value.skus?.length === 1) {&ndash;&gt;-->
<!--&lt;!&ndash;//       skuObj.value = good.value.skus[0]&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//       // 如果存在规格，自动选中第一个规格的第一个选项&ndash;&gt;-->
<!--&lt;!&ndash;//       if (good.value.specs?.length > 0) {&ndash;&gt;-->
<!--&lt;!&ndash;//         good.value.specs.forEach(spec => {&ndash;&gt;-->
<!--&lt;!&ndash;//           const firstValid = spec.values.find(v => !v.disabled)&ndash;&gt;-->
<!--&lt;!&ndash;//           if (firstValid) firstValid.selected = true&ndash;&gt;-->
<!--&lt;!&ndash;//         })&ndash;&gt;-->
<!--&lt;!&ndash;//       }&ndash;&gt;-->
<!--&lt;!&ndash;//     }&ndash;&gt;-->
<!--&lt;!&ndash;//   } catch (error) {&ndash;&gt;-->
<!--&lt;!&ndash;//     ElMessage.error('商品加载失败')&ndash;&gt;-->
<!--&lt;!&ndash;//     console.error('接口错误:', error)&ndash;&gt;-->
<!--&lt;!&ndash;//   }&ndash;&gt;-->
<!--&lt;!&ndash;// }&ndash;&gt;-->
<!--&lt;!&ndash;// const getGoods = async () => {&ndash;&gt;-->
<!--&lt;!&ndash;//   try {&ndash;&gt;-->
<!--&lt;!&ndash;//     const res = await getDetailAPI(route.params.id)&ndash;&gt;-->
<!--&lt;!&ndash;//     good.value = res.data&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // ✅ 重构规格解析逻辑&ndash;&gt;-->
<!--&lt;!&ndash;//     const specSet = new Map()&ndash;&gt;-->
<!--&lt;!&ndash;//     if (Array.isArray(good.value.specs)) {&ndash;&gt;-->
<!--&lt;!&ndash;//       good.value.specs.forEach(specStr => {&ndash;&gt;-->
<!--&lt;!&ndash;//         try {&ndash;&gt;-->
<!--&lt;!&ndash;//           const specObj = JSON.parse(specStr)&ndash;&gt;-->
<!--&lt;!&ndash;//           Object.entries(specObj).forEach(([key, value]) => {&ndash;&gt;-->
<!--&lt;!&ndash;//             if (!specSet.has(key)) {&ndash;&gt;-->
<!--&lt;!&ndash;//               specSet.set(key, new Set())&ndash;&gt;-->
<!--&lt;!&ndash;//             }&ndash;&gt;-->
<!--&lt;!&ndash;//             specSet.get(key).add(value)&ndash;&gt;-->
<!--&lt;!&ndash;//           })&ndash;&gt;-->
<!--&lt;!&ndash;//         } catch (e) {&ndash;&gt;-->
<!--&lt;!&ndash;//           console.error('规格解析失败:', specStr)&ndash;&gt;-->
<!--&lt;!&ndash;//         }&ndash;&gt;-->
<!--&lt;!&ndash;//       })&ndash;&gt;-->
<!--&lt;!&ndash;//     }&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 转换规格结构&ndash;&gt;-->
<!--&lt;!&ndash;//     good.value.specs = Array.from(specSet).map(([name, values]) => ({&ndash;&gt;-->
<!--&lt;!&ndash;//       id: name, // 使用规格名称作为唯一标识&ndash;&gt;-->
<!--&lt;!&ndash;//       name,&ndash;&gt;-->
<!--&lt;!&ndash;//       values: Array.from(values).map(v => ({&ndash;&gt;-->
<!--&lt;!&ndash;//         name: v,&ndash;&gt;-->
<!--&lt;!&ndash;//         disabled: false,&ndash;&gt;-->
<!--&lt;!&ndash;//         selected: false&ndash;&gt;-->
<!--&lt;!&ndash;//       }))&ndash;&gt;-->
<!--&lt;!&ndash;//     }))&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // ✅ 增强SKU处理&ndash;&gt;-->
<!--&lt;!&ndash;//     const pathMap = getPathMap(good.value.skus, good.value.specs)&ndash;&gt;-->
<!--&lt;!&ndash;//     initDisabledStatus(good.value.specs, pathMap)&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 自动选择逻辑优化&ndash;&gt;-->
<!--&lt;!&ndash;//     const availableSkus = good.value.skus.filter(sku => sku.inventory > 0)&ndash;&gt;-->
<!--&lt;!&ndash;//     if (availableSkus.length === 1) {&ndash;&gt;-->
<!--&lt;!&ndash;//       const sku = availableSkus[0]&ndash;&gt;-->
<!--&lt;!&ndash;//       const specs = JSON.parse(good.value.specs.find(s => s.includes(sku.id))); // 需要根据数据结构调整&ndash;&gt;-->
<!--&lt;!&ndash;//       Object.entries(specs).forEach(([name, value]) => {&ndash;&gt;-->
<!--&lt;!&ndash;//         const spec = good.value.specs.find(s => s.name === name)&ndash;&gt;-->
<!--&lt;!&ndash;//         const val = spec?.values.find(v => v.name === value)&ndash;&gt;-->
<!--&lt;!&ndash;//         if (val) val.selected = true&ndash;&gt;-->
<!--&lt;!&ndash;//       })&ndash;&gt;-->
<!--&lt;!&ndash;//       skuChange(sku)&ndash;&gt;-->
<!--&lt;!&ndash;//     }&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//   } catch (error) {&ndash;&gt;-->
<!--&lt;!&ndash;//     ElMessage.error('商品加载失败')&ndash;&gt;-->
<!--&lt;!&ndash;//     console.error('接口错误:', error)&ndash;&gt;-->
<!--&lt;!&ndash;//   }&ndash;&gt;-->
<!--&lt;!&ndash;// }&ndash;&gt;-->
<!--&lt;!&ndash;// 重构后的getGoods方法&ndash;&gt;-->
<!--&lt;!&ndash;// const getGoods = async () => {&ndash;&gt;-->
<!--&lt;!&ndash;//   try {&ndash;&gt;-->
<!--&lt;!&ndash;//     const res = await getDetailAPI(route.params.id)&ndash;&gt;-->
<!--&lt;!&ndash;//     good.value = res.data&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 从SKU中提取规格结构&ndash;&gt;-->
<!--&lt;!&ndash;//     const specMap = new Map()&ndash;&gt;-->
<!--&lt;!&ndash;//     good.value.skus?.forEach(sku => {&ndash;&gt;-->
<!--&lt;!&ndash;//       try {&ndash;&gt;-->
<!--&lt;!&ndash;//         const specs = JSON.parse(sku.specs)&ndash;&gt;-->
<!--&lt;!&ndash;//         Object.entries(specs).forEach(([name, value]) => {&ndash;&gt;-->
<!--&lt;!&ndash;//           if (!specMap.has(name)) {&ndash;&gt;-->
<!--&lt;!&ndash;//             specMap.set(name, new Set())&ndash;&gt;-->
<!--&lt;!&ndash;//           }&ndash;&gt;-->
<!--&lt;!&ndash;//           specMap.get(name).add(value)&ndash;&gt;-->
<!--&lt;!&ndash;//         })&ndash;&gt;-->
<!--&lt;!&ndash;//       } catch (e) {&ndash;&gt;-->
<!--&lt;!&ndash;//         console.error('SKU规格解析失败', sku.specs)&ndash;&gt;-->
<!--&lt;!&ndash;//       }&ndash;&gt;-->
<!--&lt;!&ndash;//     })&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 转换规格结构&ndash;&gt;-->
<!--&lt;!&ndash;//     good.value.specs = Array.from(specMap).map(([name, values]) => ({&ndash;&gt;-->
<!--&lt;!&ndash;//       name,&ndash;&gt;-->
<!--&lt;!&ndash;//       values: Array.from(values).map(v => ({&ndash;&gt;-->
<!--&lt;!&ndash;//         name: v,&ndash;&gt;-->
<!--&lt;!&ndash;//         selected: false,&ndash;&gt;-->
<!--&lt;!&ndash;//         disabled: false&ndash;&gt;-->
<!--&lt;!&ndash;//       }))&ndash;&gt;-->
<!--&lt;!&ndash;//     }))&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 生成路径映射并初始化禁用状态&ndash;&gt;-->
<!--&lt;!&ndash;//     const pathMap = getPathMap(good.value.skus, good.value.specs)&ndash;&gt;-->
<!--&lt;!&ndash;//     initDisabledStatus(good.value.specs, pathMap)&ndash;&gt;-->
<!--&lt;!&ndash;//&ndash;&gt;-->
<!--&lt;!&ndash;//     // 处理唯一SKU自动选中&ndash;&gt;-->
<!--&lt;!&ndash;//     const availableSkus = good.value.skus?.filter(sku => sku.inventory > 0)&ndash;&gt;-->
<!--&lt;!&ndash;//     if (availableSkus.length === 1) {&ndash;&gt;-->
<!--&lt;!&ndash;//       const specs = JSON.parse(availableSkus[0].specs)&ndash;&gt;-->
<!--&lt;!&ndash;//       good.value.specs.forEach(spec => {&ndash;&gt;-->
<!--&lt;!&ndash;//         const value = spec.values.find(v => v.name === specs[spec.name])&ndash;&gt;-->
<!--&lt;!&ndash;//         if (value) value.selected = true&ndash;&gt;-->
<!--&lt;!&ndash;//       })&ndash;&gt;-->
<!--&lt;!&ndash;//       skuObj.value = availableSkus[0]&ndash;&gt;-->
<!--&lt;!&ndash;//     }&ndash;&gt;-->
<!--&lt;!&ndash;//   } catch (error) {&ndash;&gt;-->
<!--&lt;!&ndash;//     ElMessage.error('商品加载失败')&ndash;&gt;-->
<!--&lt;!&ndash;//     console.error('接口错误:', error)&ndash;&gt;-->
<!--&lt;!&ndash;//   }&ndash;&gt;-->
<!--&lt;!&ndash;// }&ndash;&gt;-->
<!--&lt;!&ndash;const getGoods = async () => {&ndash;&gt;-->
<!--&lt;!&ndash;  try {&ndash;&gt;-->
<!--&lt;!&ndash;    const res = await getDetailAPI(route.params.id)&ndash;&gt;-->
<!--&lt;!&ndash;    good.value = res.data&ndash;&gt;-->

<!--&lt;!&ndash;    // 从SKU构建规格结构&ndash;&gt;-->
<!--&lt;!&ndash;    const specData = {}&ndash;&gt;-->
<!--&lt;!&ndash;    good.value.skus?.forEach(sku => {&ndash;&gt;-->
<!--&lt;!&ndash;      try {&ndash;&gt;-->
<!--&lt;!&ndash;        const specs = JSON.parse(sku.specs)&ndash;&gt;-->
<!--&lt;!&ndash;        Object.entries(specs).forEach(([name, value]) => {&ndash;&gt;-->
<!--&lt;!&ndash;          if (!specData[name]) {&ndash;&gt;-->
<!--&lt;!&ndash;            specData[name] = new Set()&ndash;&gt;-->
<!--&lt;!&ndash;          }&ndash;&gt;-->
<!--&lt;!&ndash;          specData[name].add(value)&ndash;&gt;-->
<!--&lt;!&ndash;        })&ndash;&gt;-->
<!--&lt;!&ndash;      } catch (e) {&ndash;&gt;-->
<!--&lt;!&ndash;        console.error('SKU规格解析失败', sku.specs)&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    })&ndash;&gt;-->

<!--&lt;!&ndash;    // 转换为组件需要的格式&ndash;&gt;-->
<!--&lt;!&ndash;    good.value.specs = Object.entries(specData).map(([name, values]) => ({&ndash;&gt;-->
<!--&lt;!&ndash;      name,&ndash;&gt;-->
<!--&lt;!&ndash;      values: Array.from(values).map(v => ({&ndash;&gt;-->
<!--&lt;!&ndash;        name: v,&ndash;&gt;-->
<!--&lt;!&ndash;        selected: false,&ndash;&gt;-->
<!--&lt;!&ndash;        disabled: false&ndash;&gt;-->
<!--&lt;!&ndash;      }))&ndash;&gt;-->
<!--&lt;!&ndash;    }))&ndash;&gt;-->

<!--&lt;!&ndash;    // 初始化路径映射和禁用状态&ndash;&gt;-->
<!--&lt;!&ndash;    const pathMap = getPathMap(good.value.skus, good.value.specs)&ndash;&gt;-->
<!--&lt;!&ndash;    initDisabledStatus(good.value.specs, pathMap)&ndash;&gt;-->

<!--&lt;!&ndash;    // 自动选择唯一可用SKU&ndash;&gt;-->
<!--&lt;!&ndash;    const availableSkus = good.value.skus?.filter(sku => sku.inventory > 0)&ndash;&gt;-->
<!--&lt;!&ndash;    if (availableSkus.length === 1) {&ndash;&gt;-->
<!--&lt;!&ndash;      const specs = JSON.parse(availableSkus[0].specs)&ndash;&gt;-->
<!--&lt;!&ndash;      good.value.specs.forEach(spec => {&ndash;&gt;-->
<!--&lt;!&ndash;        const value = spec.values.find(v => v.name === specs[spec.name])&ndash;&gt;-->
<!--&lt;!&ndash;        if (value) {&ndash;&gt;-->
<!--&lt;!&ndash;          value.selected = true&ndash;&gt;-->
<!--&lt;!&ndash;          value.disabled = false&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->
<!--&lt;!&ndash;      })&ndash;&gt;-->
<!--&lt;!&ndash;      skuObj.value = availableSkus[0]&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  } catch (error) {&ndash;&gt;-->
<!--&lt;!&ndash;    ElMessage.error('商品加载失败')&ndash;&gt;-->
<!--&lt;!&ndash;    console.error('接口错误:', error)&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;getGoods()&ndash;&gt;-->
<!--&lt;!&ndash;// 加入购物车逻辑&ndash;&gt;-->
<!--&lt;!&ndash;// 1.选择商品规格&ndash;&gt;-->
<!--&lt;!&ndash;const skuObj = ref({})&ndash;&gt;-->
<!--&lt;!&ndash;if (good.value?.skus?.length === 1 && good.value?.specs?.length === 0) {&ndash;&gt;-->
<!--&lt;!&ndash;  skuObj.value = good.value.skus[0];&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;const skuChange = (sku) => {&ndash;&gt;-->
<!--&lt;!&ndash;  skuObj.value = sku&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;// 2.输入数量&ndash;&gt;-->
<!--&lt;!&ndash;const num = ref(1)&ndash;&gt;-->
<!--&lt;!&ndash;const countChange = (count) => {&ndash;&gt;-->
<!--&lt;!&ndash;  num.value = count&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;// 3.点击加入购物车&ndash;&gt;-->
<!--&lt;!&ndash;const cartStore = useCartStore()&ndash;&gt;-->
<!--&lt;!&ndash;const add = () => {&ndash;&gt;-->
<!--&lt;!&ndash;  // 处理无规格商品&ndash;&gt;-->
<!--&lt;!&ndash;  if (good.value.specs?.length === 0 && good.value.skus?.length === 1) {&ndash;&gt;-->
<!--&lt;!&ndash;    cartStore.addCart({&ndash;&gt;-->
<!--&lt;!&ndash;      id: good.value.id,&ndash;&gt;-->
<!--&lt;!&ndash;      name: good.value.name,&ndash;&gt;-->
<!--&lt;!&ndash;      price: good.value.price,&ndash;&gt;-->
<!--&lt;!&ndash;      count: num.value,&ndash;&gt;-->
<!--&lt;!&ndash;      skuId: good.value.skus[0].id,&ndash;&gt;-->
<!--&lt;!&ndash;      attrsText: '',&ndash;&gt;-->
<!--&lt;!&ndash;      selected: true&ndash;&gt;-->
<!--&lt;!&ndash;    })&ndash;&gt;-->
<!--&lt;!&ndash;    ElMessage.success('加入购物车成功')&ndash;&gt;-->
<!--&lt;!&ndash;    return&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  // 常规处理&ndash;&gt;-->
<!--&lt;!&ndash;  if (skuObj.value.id) {&ndash;&gt;-->
<!--&lt;!&ndash;    cartStore.addCart({&ndash;&gt;-->
<!--&lt;!&ndash;      id: good.value.id,&ndash;&gt;-->
<!--&lt;!&ndash;      name: good.value.name,&ndash;&gt;-->
<!--&lt;!&ndash;      price: skuObj.value.price,&ndash;&gt;-->
<!--&lt;!&ndash;      count: num.value,&ndash;&gt;-->
<!--&lt;!&ndash;      skuId: skuObj.value.id,&ndash;&gt;-->
<!--&lt;!&ndash;      attrsText: Object.values(JSON.parse(skuObj.value.specs)).join(' '),&ndash;&gt;-->
<!--&lt;!&ndash;      selected: true&ndash;&gt;-->
<!--&lt;!&ndash;    })&ndash;&gt;-->
<!--&lt;!&ndash;    ElMessage.success('加入购物车成功')&ndash;&gt;-->
<!--&lt;!&ndash;  } else {&ndash;&gt;-->
<!--&lt;!&ndash;    ElMessage.warning('请选择完整规格')&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;// const add = () => {&ndash;&gt;-->
<!--&lt;!&ndash;//   // 当只有唯一SKU时直接使用该SKU信息&ndash;&gt;-->
<!--&lt;!&ndash;//   if (good.value.skus?.length === 1) {&ndash;&gt;-->
<!--&lt;!&ndash;//     const defaultSku = good.value.skus[0]&ndash;&gt;-->
<!--&lt;!&ndash;//     cartStore.addCart({&ndash;&gt;-->
<!--&lt;!&ndash;//       id: good.value?.id,&ndash;&gt;-->
<!--&lt;!&ndash;//       name: good.value.name,&ndash;&gt;-->
<!--&lt;!&ndash;//       price: defaultSku.price,&ndash;&gt;-->
<!--&lt;!&ndash;//       count: num.value,&ndash;&gt;-->
<!--&lt;!&ndash;//       skuId: defaultSku.id,  // 确保使用默认SKU的ID&ndash;&gt;-->
<!--&lt;!&ndash;//       attrsText: defaultSku.specsText,&ndash;&gt;-->
<!--&lt;!&ndash;//       selected: true&ndash;&gt;-->
<!--&lt;!&ndash;//     })&ndash;&gt;-->
<!--&lt;!&ndash;//     ElMessage.success('加入购物车成功')&ndash;&gt;-->
<!--&lt;!&ndash;//     return&ndash;&gt;-->
<!--&lt;!&ndash;//   }&ndash;&gt;-->
<!--&lt;!&ndash;//   if (skuObj.value.id) {&ndash;&gt;-->
<!--&lt;!&ndash;//     // 规格选择完成，触发cartStore的action&ndash;&gt;-->
<!--&lt;!&ndash;//     cartStore.addCart({&ndash;&gt;-->
<!--&lt;!&ndash;//       id: good.value?.id,&ndash;&gt;-->
<!--&lt;!&ndash;//       name: good.value.name,&ndash;&gt;-->
<!--&lt;!&ndash;//       // picture: good.value.mainPictures,&ndash;&gt;-->
<!--&lt;!&ndash;//       price: skuObj.value.price,&ndash;&gt;-->
<!--&lt;!&ndash;//       count: num.value,&ndash;&gt;-->
<!--&lt;!&ndash;//       skuId: skuObj.value?.id,&ndash;&gt;-->
<!--&lt;!&ndash;//       attrsText: skuObj.value?.specsText,&ndash;&gt;-->
<!--&lt;!&ndash;//       selected: true&ndash;&gt;-->
<!--&lt;!&ndash;//     })&ndash;&gt;-->
<!--&lt;!&ndash;//     ElMessage.success('加入购物车成功')&ndash;&gt;-->
<!--&lt;!&ndash;//   } else {&ndash;&gt;-->
<!--&lt;!&ndash;//     // 规格没有选择，提示用户&ndash;&gt;-->
<!--&lt;!&ndash;//     ElMessage.warning('请选择完规格')&ndash;&gt;-->
<!--&lt;!&ndash;//   }&ndash;&gt;-->
<!--&lt;!&ndash;// }&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; 错误原因：goods一开始{}  {}.categories -> undefined  -> undefined[1]&ndash;&gt;-->
<!--&lt;!&ndash;1. 可选链的语法?.&ndash;&gt;-->
<!--&lt;!&ndash;2. v-if手动控制渲染时机 保证只有数据存在才渲染&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <div class="xtx-goods-page">&ndash;&gt;-->
<!--&lt;!&ndash;    <div class="container" v-if="good.details">&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="bread-container">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-breadcrumb separator=">">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>&ndash;&gt;-->
<!--&lt;!&ndash;          &lt;!&ndash; 根据实际数据结构调整，这里只用第一个分类 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;          <el-breadcrumb-item&ndash;&gt;-->
<!--&lt;!&ndash;              :to="{ path: `/category/${good.categories?.[0]?.id}` }"&ndash;&gt;-->
<!--&lt;!&ndash;          >{{ good.categories?.[0]?.name }}&ndash;&gt;-->
<!--&lt;!&ndash;          </el-breadcrumb-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-breadcrumb-item>{{ good.name }}</el-breadcrumb-item>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-breadcrumb>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      &lt;!&ndash;      <div class="bread-container">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;        <el-breadcrumb separator=">">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;          <el-breadcrumb-item&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;            :to="{ path: `/category/${good.categories?.[1].id}` }"&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;            >{{ good.categories?.[1].name }}&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;          </el-breadcrumb-item>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;          <el-breadcrumb-item&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;            :to="{ path: `/category/sub/${good.categories?.[0].id}` }"&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;            >{{ good.categories?.[0].name }}&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;          </el-breadcrumb-item>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;          <el-breadcrumb-item>抓绒保暖，毛毛虫子儿童运动鞋</el-breadcrumb-item>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;        </el-breadcrumb>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;      </div>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;      &lt;!&ndash; 商品信息 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="info-container">&ndash;&gt;-->
<!--&lt;!&ndash;        <div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="goods-info">&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="media">&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 图片预览区 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <goods-image :imageList="good.mainPictures"></goods-image>&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 统计数量 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <ul class="goods-sales">&ndash;&gt;-->
<!--&lt;!&ndash;                <li>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p>销量人气</p>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p>{{ good.saleCount }}+</p>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p><i class="iconfont icon-task-filling"></i>销量人气</p>&ndash;&gt;-->
<!--&lt;!&ndash;                </li>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                <li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                  <p>商品评价</p>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                  <p>{{ good.commentCount }}+</p>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                  <p><i class="iconfont icon-comment-filling"></i>查看评价</p>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                </li>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                <li>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p>收藏人气</p>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p>{{ good.collectCount }}+</p>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>&ndash;&gt;-->
<!--&lt;!&ndash;                </li>&ndash;&gt;-->
<!--&lt;!&ndash;                <li>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p>品牌信息</p>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p>{{ good.brand?.name }}+</p>&ndash;&gt;-->
<!--&lt;!&ndash;                  <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>&ndash;&gt;-->
<!--&lt;!&ndash;                </li>&ndash;&gt;-->
<!--&lt;!&ndash;              </ul>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="spec">&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 商品信息区 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="g-name">{{ good.name }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="g-desc">{{ good.desc }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;              <p class="g-price">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;&lt;!&ndash;                <span>{{ good.oldPrice }}</span>&ndash;&gt;&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                <span> {{ good.price }}</span>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;              </p>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="g-price">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>¥{{ good.price }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                &lt;!&ndash; 根据实际数据结构显示原价 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                <span v-if="good.oldPrice && good.oldPrice !== good.price" class="old-price">&ndash;&gt;-->
<!--&lt;!&ndash;    ¥{{ good.oldPrice }}&ndash;&gt;-->
<!--&lt;!&ndash;  </span>&ndash;&gt;-->
<!--&lt;!&ndash;              </p>&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="g-service">&ndash;&gt;-->
<!--&lt;!&ndash;                <dl>&ndash;&gt;-->
<!--&lt;!&ndash;                  <dt>促销</dt>&ndash;&gt;-->
<!--&lt;!&ndash;                  <dd>12月好物放送，App领券购买直降120元</dd>&ndash;&gt;-->
<!--&lt;!&ndash;                </dl>&ndash;&gt;-->
<!--&lt;!&ndash;                <dl>&ndash;&gt;-->
<!--&lt;!&ndash;                  <dt>服务</dt>&ndash;&gt;-->
<!--&lt;!&ndash;                  <dd>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span>无忧退货</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span>快速退款</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span>免费包邮</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <a href="javascript:;">了解详情</a>&ndash;&gt;-->
<!--&lt;!&ndash;                  </dd>&ndash;&gt;-->
<!--&lt;!&ndash;                </dl>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; sku组件 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;              <GoodsSku :goods="good" @change="skuChange"></GoodsSku>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <GoodsSku&ndash;&gt;-->
<!--&lt;!&ndash;                  v-if="good.specs?.length > 0"&ndash;&gt;-->
<!--&lt;!&ndash;                  :goods="good"&ndash;&gt;-->
<!--&lt;!&ndash;                  @change="skuChange"&ndash;&gt;-->
<!--&lt;!&ndash;              />&ndash;&gt;-->
<!--&lt;!&ndash;              <div v-else class="no-spec">该商品暂无规格</div>&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 数据组件 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <el-input-number v-model="num" :min="1" @change="countChange" />&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 按钮组件 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <div>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button size="large" class="btn" @click="add">&ndash;&gt;-->
<!--&lt;!&ndash;                  加入购物车&ndash;&gt;-->
<!--&lt;!&ndash;                </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="goods-footer">&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="goods-article">&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 商品详情 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <div class="goods-tabs">&ndash;&gt;-->
<!--&lt;!&ndash;                <nav>&ndash;&gt;-->
<!--&lt;!&ndash;                  <a>商品详情</a>&ndash;&gt;-->
<!--&lt;!&ndash;                </nav>&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="goods-detail">&ndash;&gt;-->
<!--&lt;!&ndash;                  &lt;!&ndash; 属性 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                  <ul class="attrs">&ndash;&gt;-->
<!--&lt;!&ndash;                    <li&ndash;&gt;-->
<!--&lt;!&ndash;                      v-for="item in good.details.properties"&ndash;&gt;-->
<!--&lt;!&ndash;                      :key="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;                    >&ndash;&gt;-->
<!--&lt;!&ndash;                      <span class="dt">{{ item.name }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                      <span class="dd">{{ item.value }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    </li>&ndash;&gt;-->
<!--&lt;!&ndash;                  </ul>&ndash;&gt;-->
<!--&lt;!&ndash;                  &lt;!&ndash; 图片 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="goods-aside">&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 24小时热榜 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <goods-hot :type="1"></goods-hot>&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 周热榜 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <goods-hot :type="2"></goods-hot>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--&lt;!&ndash;  </div>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<style scoped lang="scss">&ndash;&gt;-->
<!--&lt;!&ndash;.xtx-goods-page {&ndash;&gt;-->
<!--&lt;!&ndash;  .goods-info {&ndash;&gt;-->
<!--&lt;!&ndash;    min-height: 600px;&ndash;&gt;-->
<!--&lt;!&ndash;    background: #fff;&ndash;&gt;-->
<!--&lt;!&ndash;    display: flex;&ndash;&gt;-->

<!--&lt;!&ndash;    .media {&ndash;&gt;-->
<!--&lt;!&ndash;      width: 580px;&ndash;&gt;-->
<!--&lt;!&ndash;      height: 600px;&ndash;&gt;-->
<!--&lt;!&ndash;      padding: 30px 50px;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->

<!--&lt;!&ndash;    .spec {&ndash;&gt;-->
<!--&lt;!&ndash;      flex: 1;&ndash;&gt;-->
<!--&lt;!&ndash;      padding: 30px 30px 30px 0;&ndash;&gt;-->
<!--&lt;!&ndash;      .no-spec {&ndash;&gt;-->
<!--&lt;!&ndash;        color: #666;&ndash;&gt;-->
<!--&lt;!&ndash;        padding: 20px 0;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .goods-footer {&ndash;&gt;-->
<!--&lt;!&ndash;    display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;    margin-top: 20px;&ndash;&gt;-->

<!--&lt;!&ndash;    .goods-article {&ndash;&gt;-->
<!--&lt;!&ndash;      width: 940px;&ndash;&gt;-->
<!--&lt;!&ndash;      margin-right: 20px;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->

<!--&lt;!&ndash;    .goods-aside {&ndash;&gt;-->
<!--&lt;!&ndash;      width: 280px;&ndash;&gt;-->
<!--&lt;!&ndash;      min-height: 1000px;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .goods-tabs {&ndash;&gt;-->
<!--&lt;!&ndash;    min-height: 600px;&ndash;&gt;-->
<!--&lt;!&ndash;    background: #fff;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .goods-warn {&ndash;&gt;-->
<!--&lt;!&ndash;    min-height: 600px;&ndash;&gt;-->
<!--&lt;!&ndash;    background: #fff;&ndash;&gt;-->
<!--&lt;!&ndash;    margin-top: 20px;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .number-box {&ndash;&gt;-->
<!--&lt;!&ndash;    display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;    align-items: center;&ndash;&gt;-->

<!--&lt;!&ndash;    .label {&ndash;&gt;-->
<!--&lt;!&ndash;      width: 60px;&ndash;&gt;-->
<!--&lt;!&ndash;      color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;      padding-left: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .g-name {&ndash;&gt;-->
<!--&lt;!&ndash;    font-size: 22px;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .g-desc {&ndash;&gt;-->
<!--&lt;!&ndash;    color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;    margin-top: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .g-price {&ndash;&gt;-->
<!--&lt;!&ndash;    margin-top: 10px;&ndash;&gt;-->

<!--&lt;!&ndash;    span {&ndash;&gt;-->
<!--&lt;!&ndash;      &::before {&ndash;&gt;-->
<!--&lt;!&ndash;        content: '¥';&ndash;&gt;-->
<!--&lt;!&ndash;        font-size: 14px;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->

<!--&lt;!&ndash;      &:first-child {&ndash;&gt;-->
<!--&lt;!&ndash;        color: $priceColor;&ndash;&gt;-->
<!--&lt;!&ndash;        margin-right: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;        font-size: 22px;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->

<!--&lt;!&ndash;      &:last-child {&ndash;&gt;-->
<!--&lt;!&ndash;        color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;        text-decoration: line-through;&ndash;&gt;-->
<!--&lt;!&ndash;        font-size: 16px;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;    .old-price {&ndash;&gt;-->
<!--&lt;!&ndash;      font-size: 16px;&ndash;&gt;-->
<!--&lt;!&ndash;      color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;      text-decoration: line-through;&ndash;&gt;-->
<!--&lt;!&ndash;      margin-left: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->

<!--&lt;!&ndash;    .no-spec {&ndash;&gt;-->
<!--&lt;!&ndash;      padding: 15px 0;&ndash;&gt;-->
<!--&lt;!&ndash;      color: #666;&ndash;&gt;-->
<!--&lt;!&ndash;      font-size: 14px;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .g-service {&ndash;&gt;-->
<!--&lt;!&ndash;    background: #f5f5f5;&ndash;&gt;-->
<!--&lt;!&ndash;    width: 500px;&ndash;&gt;-->
<!--&lt;!&ndash;    padding: 20px 10px 0 10px;&ndash;&gt;-->
<!--&lt;!&ndash;    margin-top: 10px;&ndash;&gt;-->

<!--&lt;!&ndash;    dl {&ndash;&gt;-->
<!--&lt;!&ndash;      padding-bottom: 20px;&ndash;&gt;-->
<!--&lt;!&ndash;      display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;      align-items: center;&ndash;&gt;-->

<!--&lt;!&ndash;      dt {&ndash;&gt;-->
<!--&lt;!&ndash;        width: 50px;&ndash;&gt;-->
<!--&lt;!&ndash;        color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->

<!--&lt;!&ndash;      dd {&ndash;&gt;-->
<!--&lt;!&ndash;        color: #666;&ndash;&gt;-->

<!--&lt;!&ndash;        &:last-child {&ndash;&gt;-->
<!--&lt;!&ndash;          span {&ndash;&gt;-->
<!--&lt;!&ndash;            margin-right: 10px;&ndash;&gt;-->

<!--&lt;!&ndash;            &::before {&ndash;&gt;-->
<!--&lt;!&ndash;              content: '•';&ndash;&gt;-->
<!--&lt;!&ndash;              color: $xtxColor;&ndash;&gt;-->
<!--&lt;!&ndash;              margin-right: 2px;&ndash;&gt;-->
<!--&lt;!&ndash;            }&ndash;&gt;-->
<!--&lt;!&ndash;          }&ndash;&gt;-->

<!--&lt;!&ndash;          a {&ndash;&gt;-->
<!--&lt;!&ndash;            color: $xtxColor;&ndash;&gt;-->
<!--&lt;!&ndash;          }&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .goods-sales {&ndash;&gt;-->
<!--&lt;!&ndash;    display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;    width: 400px;&ndash;&gt;-->
<!--&lt;!&ndash;    align-items: center;&ndash;&gt;-->
<!--&lt;!&ndash;    text-align: center;&ndash;&gt;-->
<!--&lt;!&ndash;    height: 140px;&ndash;&gt;-->

<!--&lt;!&ndash;    li {&ndash;&gt;-->
<!--&lt;!&ndash;      flex: 1;&ndash;&gt;-->
<!--&lt;!&ndash;      position: relative;&ndash;&gt;-->

<!--&lt;!&ndash;      ~ li::after {&ndash;&gt;-->
<!--&lt;!&ndash;        position: absolute;&ndash;&gt;-->
<!--&lt;!&ndash;        top: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;        left: 0;&ndash;&gt;-->
<!--&lt;!&ndash;        height: 60px;&ndash;&gt;-->
<!--&lt;!&ndash;        border-left: 1px solid #e4e4e4;&ndash;&gt;-->
<!--&lt;!&ndash;        content: '';&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->

<!--&lt;!&ndash;      p {&ndash;&gt;-->
<!--&lt;!&ndash;        &:first-child {&ndash;&gt;-->
<!--&lt;!&ndash;          color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->

<!--&lt;!&ndash;        &:nth-child(2) {&ndash;&gt;-->
<!--&lt;!&ndash;          color: $priceColor;&ndash;&gt;-->
<!--&lt;!&ndash;          margin-top: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->

<!--&lt;!&ndash;        &:last-child {&ndash;&gt;-->
<!--&lt;!&ndash;          color: #666;&ndash;&gt;-->
<!--&lt;!&ndash;          margin-top: 10px;&ndash;&gt;-->

<!--&lt;!&ndash;          i {&ndash;&gt;-->
<!--&lt;!&ndash;            color: $xtxColor;&ndash;&gt;-->
<!--&lt;!&ndash;            font-size: 14px;&ndash;&gt;-->
<!--&lt;!&ndash;            margin-right: 2px;&ndash;&gt;-->
<!--&lt;!&ndash;          }&ndash;&gt;-->

<!--&lt;!&ndash;          &:hover {&ndash;&gt;-->
<!--&lt;!&ndash;            color: $xtxColor;&ndash;&gt;-->
<!--&lt;!&ndash;            cursor: pointer;&ndash;&gt;-->
<!--&lt;!&ndash;          }&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.goods-tabs {&ndash;&gt;-->
<!--&lt;!&ndash;  min-height: 600px;&ndash;&gt;-->
<!--&lt;!&ndash;  background: #fff;&ndash;&gt;-->

<!--&lt;!&ndash;  nav {&ndash;&gt;-->
<!--&lt;!&ndash;    height: 70px;&ndash;&gt;-->
<!--&lt;!&ndash;    line-height: 70px;&ndash;&gt;-->
<!--&lt;!&ndash;    display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;    border-bottom: 1px solid #f5f5f5;&ndash;&gt;-->

<!--&lt;!&ndash;    a {&ndash;&gt;-->
<!--&lt;!&ndash;      padding: 0 40px;&ndash;&gt;-->
<!--&lt;!&ndash;      font-size: 18px;&ndash;&gt;-->
<!--&lt;!&ndash;      position: relative;&ndash;&gt;-->

<!--&lt;!&ndash;      > span {&ndash;&gt;-->
<!--&lt;!&ndash;        color: $priceColor;&ndash;&gt;-->
<!--&lt;!&ndash;        font-size: 16px;&ndash;&gt;-->
<!--&lt;!&ndash;        margin-left: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.goods-detail {&ndash;&gt;-->
<!--&lt;!&ndash;  padding: 40px;&ndash;&gt;-->

<!--&lt;!&ndash;  .attrs {&ndash;&gt;-->
<!--&lt;!&ndash;    display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;    flex-wrap: wrap;&ndash;&gt;-->
<!--&lt;!&ndash;    margin-bottom: 30px;&ndash;&gt;-->

<!--&lt;!&ndash;    li {&ndash;&gt;-->
<!--&lt;!&ndash;      display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;      margin-bottom: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;      width: 50%;&ndash;&gt;-->

<!--&lt;!&ndash;      .dt {&ndash;&gt;-->
<!--&lt;!&ndash;        width: 100px;&ndash;&gt;-->
<!--&lt;!&ndash;        color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->

<!--&lt;!&ndash;      .dd {&ndash;&gt;-->
<!--&lt;!&ndash;        flex: 1;&ndash;&gt;-->
<!--&lt;!&ndash;        color: #666;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  > img {&ndash;&gt;-->
<!--&lt;!&ndash;    width: 100%;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.btn {&ndash;&gt;-->
<!--&lt;!&ndash;  margin-top: 20px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.bread-container {&ndash;&gt;-->
<!--&lt;!&ndash;  padding: 25px 0;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</style>&ndash;&gt;-->
<!--<script setup>-->
<!--import { ref } from 'vue'-->
<!--import { useRoute } from 'vue-router'-->
<!--import { ElMessage } from 'element-plus'-->

<!--import GoodsSku from '@/components/GoodsSku.vue'-->
<!--import { getDetailAPI } from '@/apis/detail'-->
<!--import { useCartStore } from '@/stores/index'-->
<!--import { getPathMap, initDisabledStatus } from '@/components/GoodsSku.vue'-->

<!--const route = useRoute()-->
<!--const good = ref({-->
<!--  specs: [],-->
<!--  details: {},-->
<!--  categories: [],-->
<!--  brand: {},-->
<!--  skus: []-->
<!--})-->

<!--const skuObj = ref({})-->
<!--const num = ref(1)-->
<!--const cartStore = useCartStore()-->

<!--const getGoods = async () => {-->
<!--  try {-->
<!--    const res = await getDetailAPI(route.params.id)-->
<!--    good.value = res.data-->

<!--    const specData = {}-->
<!--    good.value.skus?.forEach(sku => {-->
<!--      try {-->
<!--        const specs = JSON.parse(sku.specs)-->
<!--        Object.entries(specs).forEach(([name, value]) => {-->
<!--          if (!specData[name]) {-->
<!--            specData[name] = new Set()-->
<!--          }-->
<!--          specData[name].add(value)-->
<!--        })-->
<!--      } catch (e) {-->
<!--        console.error('SKU规格解析失败', sku.specs)-->
<!--      }-->
<!--    })-->

<!--    good.value.specs = Object.entries(specData).map(([name, values]) => ({-->
<!--      name,-->
<!--      values: Array.from(values).map(v => ({-->
<!--        name: v,-->
<!--        selected: false,-->
<!--        disabled: false-->
<!--      }))-->
<!--    }))-->

<!--    const pathMap = getPathMap(good.value.skus, good.value.specs)-->
<!--    initDisabledStatus(good.value.specs, pathMap)-->

<!--    const availableSkus = good.value.skus?.filter(sku => sku.inventory > 0)-->
<!--    if (availableSkus.length === 1) {-->
<!--      const specs = JSON.parse(availableSkus[0].specs)-->
<!--      good.value.specs.forEach(spec => {-->
<!--        const val = spec.values.find(v => v.name === specs[spec.name])-->
<!--        if (val) {-->
<!--          val.selected = true-->
<!--          val.disabled = false-->
<!--        }-->
<!--      })-->
<!--      skuObj.value = availableSkus[0]-->
<!--    }-->
<!--  } catch (error) {-->
<!--    ElMessage.error('商品加载失败')-->
<!--    console.error('接口错误:', error)-->
<!--  }-->
<!--}-->

<!--getGoods()-->

<!--const skuChange = (sku) => {-->
<!--  skuObj.value = sku-->
<!--}-->

<!--const countChange = (count) => {-->
<!--  num.value = count-->
<!--}-->

<!--const add = () => {-->
<!--  if (good.value.specs?.length === 0 && good.value.skus?.length === 1) {-->
<!--    cartStore.addCart({-->
<!--      id: good.value.id,-->
<!--      name: good.value.name,-->
<!--      price: good.value.price,-->
<!--      count: num.value,-->
<!--      skuId: good.value.skus[0].id,-->
<!--      attrsText: '',-->
<!--      selected: true-->
<!--    })-->
<!--    ElMessage.success('加入购物车成功')-->
<!--    return-->
<!--  }-->
<!--  if (skuObj.value.id) {-->
<!--    cartStore.addCart({-->
<!--      id: good.value.id,-->
<!--      name: good.value.name,-->
<!--      price: skuObj.value.price,-->
<!--      count: num.value,-->
<!--      skuId: skuObj.value.id,-->
<!--      attrsText: Object.values(JSON.parse(skuObj.value.specs)).join(' '),-->
<!--      selected: true-->
<!--    })-->
<!--    ElMessage.success('加入购物车成功')-->
<!--  } else {-->
<!--    ElMessage.warning('请选择完整规格')-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  <div class="xtx-goods-page">-->
<!--    <div class="container" v-if="good.details">-->
<!--      <div class="bread-container">-->
<!--        <el-breadcrumb separator=">">-->
<!--          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--          <el-breadcrumb-item :to="{ path: `/category/${good.categories?.[0]?.id}` }">-->
<!--            {{ good.categories?.[0]?.name }}-->
<!--          </el-breadcrumb-item>-->
<!--          <el-breadcrumb-item>{{ good.name }}</el-breadcrumb-item>-->
<!--        </el-breadcrumb>-->
<!--      </div>-->

<!--      <div class="info-container">-->
<!--        <div>-->
<!--          <div class="goods-info">-->
<!--            <div class="media">-->
<!--              <goods-image :imageList="good.mainPictures"></goods-image>-->
<!--              <ul class="goods-sales">-->
<!--                <li>-->
<!--                  <p>销量人气</p>-->
<!--                  <p>{{ good.saleCount }}+</p>-->
<!--                  <p><i class="iconfont icon-task-filling"></i>销量人气</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <p>收藏人气</p>-->
<!--                  <p>{{ good.collectCount }}+</p>-->
<!--                  <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <p>品牌信息</p>-->
<!--                  <p>{{ good.brand?.name }}+</p>-->
<!--                  <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>-->
<!--                </li>-->
<!--              </ul>-->
<!--            </div>-->

<!--            <div class="spec">-->
<!--              <p class="g-name">{{ good.name }}</p>-->
<!--              <p class="g-desc">{{ good.desc }}</p>-->
<!--              <p class="g-price">-->
<!--                <span>¥{{ good.price }}</span>-->
<!--                <span v-if="good.oldPrice && good.oldPrice !== good.price" class="old-price">-->
<!--                  ¥{{ good.oldPrice }}-->
<!--                </span>-->
<!--              </p>-->
<!--              <div class="g-service">-->
<!--                <dl>-->
<!--                  <dt>促销</dt>-->
<!--                  <dd>12月好物放送，App领券购买直降120元</dd>-->
<!--                </dl>-->
<!--                <dl>-->
<!--                  <dt>服务</dt>-->
<!--                  <dd>-->
<!--                    <span>无忧退货</span>-->
<!--                    <span>快速退款</span>-->
<!--                    <span>免费包邮</span>-->
<!--                    <a href="javascript:;">了解详情</a>-->
<!--                  </dd>-->
<!--                </dl>-->
<!--              </div>-->

<!--              <GoodsSku v-if="good.specs?.length > 0" :goods="good" @change="skuChange" />-->
<!--              <div v-else class="no-spec">该商品暂无规格</div>-->

<!--              <el-input-number v-model="num" :min="1" @change="countChange" />-->

<!--              <div>-->
<!--                <el-button size="large" class="btn" @click="add">加入购物车</el-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="goods-footer">-->
<!--            <div class="goods-article">-->
<!--              <div class="goods-tabs">-->
<!--                <nav><a>商品详情</a></nav>-->
<!--                <div class="goods-detail">-->
<!--                  <ul class="attrs">-->
<!--                    <li v-for="item in good.details.properties" :key="item.value">-->
<!--                      <span class="dt">{{ item.name }}</span>-->
<!--                      <span class="dd">{{ item.value }}</span>-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="goods-aside">-->
<!--              <goods-hot :type="1"></goods-hot>-->
<!--              <goods-hot :type="2"></goods-hot>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped lang="scss">-->
<!--.xtx-goods-page {-->
<!--  .goods-info {-->
<!--    min-height: 600px;-->
<!--    background: #fff;-->
<!--    display: flex;-->

<!--    .media {-->
<!--      width: 580px;-->
<!--      height: 600px;-->
<!--      padding: 30px 50px;-->
<!--    }-->

<!--    .spec {-->
<!--      flex: 1;-->
<!--      padding: 30px 30px 30px 0;-->

<!--      .no-spec {-->
<!--        color: #666;-->
<!--        padding: 20px 0;-->
<!--      }-->

<!--      .g-name {-->
<!--        font-size: 24px;-->
<!--        font-weight: 600;-->
<!--        margin-bottom: 10px;-->
<!--      }-->

<!--      .g-desc {-->
<!--        color: #666;-->
<!--        font-size: 14px;-->
<!--        margin-bottom: 15px;-->
<!--      }-->

<!--      .g-price {-->
<!--        font-size: 26px;-->
<!--        color: #e2343a;-->
<!--        margin-bottom: 15px;-->

<!--        .old-price {-->
<!--          color: #999;-->
<!--          font-size: 14px;-->
<!--          text-decoration: line-through;-->
<!--          margin-left: 10px;-->
<!--        }-->
<!--      }-->

<!--      .g-service {-->
<!--        margin-bottom: 20px;-->

<!--        dl {-->
<!--          display: flex;-->
<!--          align-items: center;-->
<!--          margin-bottom: 10px;-->

<!--          dt {-->
<!--            width: 50px;-->
<!--            font-weight: 700;-->
<!--          }-->

<!--          dd {-->
<!--            flex: 1;-->
<!--            color: #999;-->
<!--            font-size: 13px;-->

<!--            span {-->
<!--              margin-right: 10px;-->
<!--              background: #f2f2f2;-->
<!--              padding: 2px 6px;-->
<!--              border-radius: 2px;-->
<!--            }-->

<!--            a {-->
<!--              color: #409eff;-->
<!--              cursor: pointer;-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      }-->

<!--      .btn {-->
<!--        width: 100%;-->
<!--        background-color: #f40;-->
<!--        color: #fff;-->
<!--        border: none;-->

<!--        &:hover {-->
<!--          background-color: #d83838;-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .goods-footer {-->
<!--    display: flex;-->
<!--    margin-top: 20px;-->

<!--    .goods-article {-->
<!--      width: 940px;-->
<!--      margin-right: 20px;-->

<!--      .goods-tabs {-->
<!--        min-height: 600px;-->
<!--        background: #fff;-->

<!--        nav {-->
<!--          height: 70px;-->
<!--          line-height: 70px;-->
<!--          padding-left: 20px;-->
<!--          border-bottom: 1px solid #eee;-->

<!--          a {-->
<!--            font-weight: 700;-->
<!--            color: #333;-->
<!--            cursor: pointer;-->
<!--          }-->
<!--        }-->

<!--        .goods-detail {-->
<!--          padding: 20px;-->

<!--          .attrs {-->
<!--            list-style: none;-->
<!--            padding: 0;-->

<!--            li {-->
<!--              display: flex;-->
<!--              margin-bottom: 10px;-->

<!--              .dt {-->
<!--                width: 150px;-->
<!--                font-weight: 600;-->
<!--                color: #666;-->
<!--              }-->

<!--              .dd {-->
<!--                flex: 1;-->
<!--                color: #333;-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->

<!--    .goods-aside {-->
<!--      width: 280px;-->
<!--      min-height: 1000px;-->
<!--    }-->
<!--  }-->

<!--  .goods-sales {-->
<!--    display: flex;-->
<!--    width: 400px;-->
<!--    align-items: center;-->
<!--    text-align: center;-->
<!--    height: 140px;-->

<!--    li {-->
<!--      flex: 1;-->
<!--      position: relative;-->

<!--      ~ li::after {-->
<!--        content: "";-->
<!--        position: absolute;-->
<!--        top: 10px;-->
<!--        left: 0;-->
<!--        height: 60px;-->
<!--        border-left: 1px solid #e4e4e4;-->
<!--      }-->

<!--      p {-->
<!--        margin: 0;-->
<!--        line-height: 30px;-->
<!--        color: #666;-->
<!--      }-->

<!--      p:nth-child(2) {-->
<!--        font-weight: 700;-->
<!--        font-size: 18px;-->
<!--      }-->

<!--      i {-->
<!--        font-size: 20px;-->
<!--        color: #f40;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
<script setup>
import { ref,reactive } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
// import GoodsSku from '@/components/GoodsSku.vue'
import { getDetailAPI } from '@/apis/detail'
import { useCartStore } from '@/stores/index'

const route = useRoute()
const cartStore = useCartStore()

// 商品数据
const good = ref({
  mainPictures: [],
  details: { pictures: [] },
  categories: [],
  brand: {},
  skus: []
})

// 规格处理逻辑
const skuOptions = ref({})
const selectedSpecs = reactive({})
const selectedSku = ref(null)
const num = ref(1)

const getGoods = async () => {
  try {
    const res = await getDetailAPI(route.params.id)
    good.value = res.data

    // 处理规格选项
    const options = {}
    good.value.skus.forEach(sku => {
      const specs = JSON.parse(sku.specs)
      for (const [key, value] of Object.entries(specs)) {
        if (!options[key]) options[key] = new Set()
        options[key].add(value)
      }
    })

    // 转换为组件需要的格式
    skuOptions.value = Object.fromEntries(
        Object.entries(options).map(([k, v]) => [k, Array.from(v)]))

    // 自动选择唯一SKU
    const availableSkus = good.value.skus.filter(sku => sku.inventory > 0)
    if (availableSkus.length === 1) {
      const specs = JSON.parse(availableSkus[0].specs)
      Object.entries(specs).forEach(([key, value]) => {
        selectedSpecs[key] = value
      })
      selectedSku.value = availableSkus[0]
    }
  } catch (error) {
    ElMessage.error('商品加载失败')
    console.error('接口错误:', error)
  }
}

// 规格选择处理
const selectSpec = (specName, value) => {
  selectedSpecs[specName] = selectedSpecs[specName] === value ? null : value
  selectedSku.value = good.value.skus.find(sku => {
    const specs = JSON.parse(sku.specs)
    return Object.entries(selectedSpecs).every(([k, v]) => specs[k] === v)
  })
}

// 加入购物车
const addToCart = () => {
  if (!selectedSku.value) {
    ElMessage.warning('请选择完整规格')
    return
  }

  cartStore.addCart({
    id: good.value.id,
    name: good.value.name,
    price: selectedSku.value.price,
    count: num.value,
    skuId: selectedSku.value.id,
    attrsText: Object.values(JSON.parse(selectedSku.value.specs)).join(' '),
    selected: true
  })
  ElMessage.success('加入购物车成功')
}

getGoods()
</script>

<template>
  <div class="xtx-goods-page">
    <div class="container" v-if="good.details">
      <!-- 面包屑导航保持原样 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/category/${good.categories?.[0]?.id}` }">
            {{ good.categories?.[0]?.name }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{ good.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 商品信息区域 -->
      <div class="info-container">
        <div class="goods-info">
          <!-- 商品主图 -->
          <div class="media">
            <div class="main-images">
              <img
                  v-for="(img, index) in good.mainPictures"
                  :key="index"
                  :src="img"
                  :alt="good.name"
                  class="main-image"
              />
            </div>
            <ul class="goods-sales">
              <li>
                <p>销量人气</p>
                <p>{{ good.salesCount }}+</p>
              </li>
              <li>
                <p>品牌信息</p>
                <p>{{ good.brand?.name }}</p>
              </li>
            </ul>
          </div>

          <!-- 商品规格 -->
          <div class="spec">
            <h1 class="g-name">{{ good.name }}</h1>
            <p class="g-desc">{{ good.desc }}</p>
            <p class="g-price">
              <span>¥{{ good.price }}</span>
              <span v-if="good.oldPrice" class="old-price">¥{{ good.oldPrice }}</span>
            </p>

            <!-- 规格选择 -->
            <div class="specs-section">
              <div class="spec-item" v-for="(values, specName) in skuOptions" :key="specName">
                <h3>{{ specName }}：</h3>
                <div class="spec-options">
                  <el-button
                      v-for="value in values"
                      :key="value"
                      @click="selectSpec(specName, value)"
                      :type="selectedSpecs[specName] === value ? 'primary' : ''"
                  >
                    {{ value }}
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 库存和数量 -->
            <div class="stock-section">
<!--              <span>库存：{{ selectedSku?.inventory || 0 }}件</span>-->
              <el-input-number
                  v-model="num"
                  :min="1"
                  :max="selectedSku?.inventory || 1"
              />
            </div>

            <el-button
                type="primary"
                size="large"
                @click="addToCart"
                :disabled="!selectedSku"
            >
              加入购物车
            </el-button>
          </div>
        </div>

        <!-- 商品详情 -->
        <div class="goods-footer">
          <div class="goods-article">
            <div class="goods-tabs">
              <h2>商品详情</h2>
              <div class="goods-detail">
                <img
                    v-for="(img, index) in good.details.pictures"
                    :key="index"
                    :src="img"
                    class="detail-image"
                />
              </div>
            </div>
          </div>

          <!-- 相似商品 -->
          <div class="similar-products">
            <h3>相似推荐</h3>
            <div class="similar-list">
              <div
                  v-for="item in good.similarProducts"
                  :key="item.id"
                  class="similar-item"
              >
                <img :src="item.picture" :alt="item.name" />
                <div class="similar-info">
                  <h4>{{ item.name }}</h4>
                  <p class="similar-price">¥{{ item.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

/* 保持原有样式结构，添加以下新样式 */
.specs-section {
  margin: 20px 0;

  .spec-item {
    margin-bottom: 15px;

    h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }
  }
}
.stock-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 15px 0;
}

.similar-products {
  margin-top: 30px;

  .similar-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;

    .similar-item {
      border: 1px solid #eee;
      padding: 10px;

      img {
        width: 100%;
        height: 180px;
        object-fit: contain;
      }

      .similar-info {
        padding: 10px 0;

        h4 {
          font-size: 14px;
          margin-bottom: 5px;
        }

        .similar-price {
          color: #e4393c;
          font-weight: bold;
        }
      }
    }
  }
}

.detail-image {
  max-width: 100%;
  margin: 10px 0;
}
.xtx-goods-page {
  .goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;

      .no-spec {
        color: #666;
        padding: 20px 0;
      }

      .g-name {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .g-desc {
        color: #666;
        font-size: 14px;
        margin-bottom: 15px;
      }

      .g-price {
        font-size: 26px;
        color: #e2343a;
        margin-bottom: 15px;

        .old-price {
          color: #999;
          font-size: 14px;
          text-decoration: line-through;
          margin-left: 10px;
        }
      }

      .g-service {
        margin-bottom: 20px;

        dl {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          dt {
            width: 50px;
            font-weight: 700;
          }

          dd {
            flex: 1;
            color: #999;
            font-size: 13px;

            span {
              margin-right: 10px;
              background: #f2f2f2;
              padding: 2px 6px;
              border-radius: 2px;
            }

            a {
              color: #409eff;
              cursor: pointer;
            }
          }
        }
      }

      .btn {
        width: 100%;
        background-color: #f40;
        color: #fff;
        border: none;

        &:hover {
          background-color: #d83838;
        }
      }
    }
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
      width: 940px;
      margin-right: 20px;

      .goods-tabs {
        min-height: 600px;
        background: #fff;

        nav {
          height: 70px;
          line-height: 70px;
          padding-left: 20px;
          border-bottom: 1px solid #eee;

          a {
            font-weight: 700;
            color: #333;
            cursor: pointer;
          }
        }

        .goods-detail {
          padding: 20px;

          .attrs {
            list-style: none;
            padding: 0;

            li {
              display: flex;
              margin-bottom: 10px;

              .dt {
                width: 150px;
                font-weight: 600;
                color: #666;
              }

              .dd {
                flex: 1;
                color: #333;
              }
            }
          }
        }
      }
    }

    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~ li::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
      }

      p {
        margin: 0;
        line-height: 30px;
        color: #666;
      }

      p:nth-child(2) {
        font-weight: 700;
        font-size: 18px;
      }

      i {
        font-size: 20px;
        color: #f40;
      }
    }
  }
}
</style>